<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragment :: head">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | User Profile</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="../../static/plugins/selectize/css/selectize.default.css">

    <!-- Theme style -->
    <link rel="stylesheet" href="../../static/css/adminlte.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../../static/plugins/fontawesome-free/css/all.min.css">

</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!-- Navbar -->
    <nav th:replace="admin/_fragment  ::Navbar" class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fa fa-bars"></i></a>
            </li>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- Messages Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" href="../index.html">
                    <i class="fa fa-paper-plane"></i>
                    <span>博客前台首页</span>
                </a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside th:replace="admin/_fragment  ::MainSidebarContainer(8)"
           class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <h1>
            <a href="../index.html" class="brand-link">
                <img src="../../static/upload/avatar.jpg" class="brand-image img-circle elevation-3">
                <span class="brand-text font-weight-light">ZengZK's Blog</span>
            </a>
        </h1>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-header">仪表盘</li>
                    <li class="nav-item">
                        <a href="dashboard.html" class="nav-link">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            <p>仪表盘</p>
                        </a>
                    </li>
                    <li class="nav-header">博客编辑</li>
                    <li class="nav-item">
                        <a href="edit.html" class="nav-link">
                            <i class="nav-icon fas fa-edit"></i>
                            <p>发布博客</p>
                        </a>
                    </li>
                    <li class="nav-header">管理模块</li>
                    <li class="nav-item">
                        <a href="blog-mgr.html" class="nav-link">
                            <i class="fa fa-list-alt nav-icon"></i>
                            <p>博客管理</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="category-mgr.html" class="nav-link">
                            <i class="fa fa-bookmark nav-icon"></i>
                            <p>分类管理</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="tag-mgr.html" class="nav-link">
                            <i class="fa fa-tags nav-icon"></i>
                            <p>标签管理</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="comment-mgr.html" class="nav-link">
                            <i class="fa fa-comments nav-icon"></i>
                            <p>评论管理</p>
                        </a>
                    </li>
                    <li class="nav-header">系统管理</li>
                    <li class="nav-item">
                        <a href="configuration.html" class="nav-link active">
                            <i class="fa fa-wrench nav-icon"></i>
                            <p>系统配置</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="../index.html" class="nav-link">
                            <i class="fa fa-sign-out-alt nav-icon"></i>
                            <p>安全退出</p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper mt-3">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card card-primary card-outline">
                            <div class="card-header">
                                <h3 class="card-title">个人信息</h3>
                            </div>
                            <!-- /.card-header -->
                            <!-- form start -->
                            <form role="form" enctype="multipart/form-data" method="post" action="/admin/upload"
                                  th:action="@{/admin/upload}">
                                <input type="hidden" name="id" th:value="${session.user.id}">

                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="username">用户名</label>
                                        <input type="text" class="form-control" name="nickname" id="username"
                                               th:value="${session.user.nickname}" value="ZengZK" placeholder="用户名">
                                    </div>
                                    <div class="form-group">
                                        <label for="email">邮箱</label>
                                        <input type="email" class="form-control" name="email" id="email"
                                               th:value="${session.user.email}" value="BuctZengZK@163.com"
                                               placeholder="邮箱">
                                    </div>
                                    <div class="form-group">
                                        <label for="avatar">头像</label>
                                        <div class="input-group">
                                            <input type="file" name="file" value="" id="avatar" class="w-100 border">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="resume">个人简介</label>
                                        <textarea class="form-control" rows="8" id="resume"
                                                  th:text="${session.user.profile}" name="profile"
                                                  placeholder="个人简介（200字内）..." maxlength="200"
                                                  style="resize:none"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="position">位置</label>
                                        <input type="text" class="form-control" name="location"
                                               th:value="${session.user.location}" id="position" value="中国, 沈阳"
                                               placeholder="position">
                                    </div>
                                    <div class="form-group">
                                        <label for="job">职业</label>
                                        <input type="text" th:value="${session.user.job}" name="job"
                                               class="form-control" id="job" placeholder="job">
                                    </div>
                                    <div class="form-group">
                                        <label for="skill">技能</label>
                                        <input type="text" id="skill" th:value="${session.user.skill}" name="skill"
                                               value="前端,后台" placeholder="skill">
                                    </div>
                                    <div class="form-group">
                                        <label for="hobby">爱好</label>
                                        <input type="text" id="hobby" th:value="${session.user.hobby}" name="hobby"
                                               value="编程,学习" placeholder="hobby">
                                    </div>
                                    <div class="form-group">
                                        <label for="github">github</label>
                                        <input type="text" class="form-control" name="github"
                                               th:value="${session.user.github}" id="github" placeholder="github">
                                    </div>
                                    <div class="form-group">
                                        <label for="QQ">QQ</label>
                                        <input type="text" class="form-control" name="qq" th:value="${session.user.qq}"
                                               id="QQ" placeholder="QQ">
                                    </div>
                                    <div class="form-group">
                                        <label for="WeChat">微信</label>
                                        <input type="text" class="form-control" name="wechat"
                                               th:value="${session.user.wechat}" id="WeChat" placeholder="WeChat">
                                    </div>
                                </div>
                                <!-- /.card-body -->
                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary float-right">确认修改</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card card-teal card-outline">
                            <div class="card-header">
                                <h3 class="card-title">站点信息</h3>
                            </div>
                            <!-- /.card-header -->
                            <!-- form start -->
                            <form role="form" action="#" th:action="@{/admin/mogifysite}">
                                <input type="hidden" name="id" th:value="${session.user.id}">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="websiteName">站点名</label>
                                        <input type="text" name="siteName" th:value="${session.user.siteName}"
                                               class="form-control"
                                               id="websiteName" value="ZengZK' Blog" placeholder="website name">
                                    </div>
                                    <div class="form-group">
                                        <label for="favicon">站点图标</label>
                                        <input type="text" name="siteIcon" class="form-control"
                                               th:value="${session.user.siteIcon}"
                                               id="favicon" placeholder="favicon.ico">
                                    </div>
                                    <div class="form-group">
                                        <label for="icp">备案号</label>
                                        <input type="text" name="icp" class="form-control"
                                               th:value="${session.user.icp}" id="icp"
                                               placeholder="ICP">
                                    </div>
                                    <div class="form-group">
                                        <label for="description">站点描述</label>
                                        <input type="text" name="siteDescription" class="form-control"
                                               th:value="${session.user.siteDescription}" id="description"
                                               placeholder="description">
                                    </div>
                                    <div class="form-group">
                                        <label for="keywords">站点关键词</label>
                                        <input type="text" name="siteKeywords" class="form-control"
                                               th:value="${session.user.siteKeywords}"
                                               id="keywords" placeholder="keywords">
                                    </div>
                                </div>
                                <!-- /.card-body -->
                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary float-right">确认修改</button>
                                </div>
                            </form>
                        </div>
                        <div class="card card-danger card-outline">
                            <div class="card-header">
                                <h3 class="card-title">修改密码</h3>

                            </div>
                            <!-- /.card-header -->
                            <!-- form start -->
                            <div id="app">
                                <form role="form" id="myform" th:action="@{/admin/updatepwd}">
                                    <input type="hidden" name="id" th:value="${session.user.id}">

                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="oldPwd">旧密码</label>
                                            <input v-model="oldpassword" @keyup="checkoldpwd" name="oldpwd"
                                                   type="password"
                                                   class="form-control"
                                                   id="oldPwd"
                                                   placeholder="old password">
                                            <span :style="color" id="span01" v-model="tips01">{{tips01}}</span>
                                        </div>

                                        <div class="form-group">
                                            <label for="newPwd">新密码</label>
                                            <input v-model="newpassword" type="password" @keyup="checkpwd"
                                                   class="form-control"
                                                   name="newPwd" id="newPwd"
                                                   placeholder="new password">
                                            <span :style="color">{{tips02}}</span>
                                        </div>
                                        <div class="form-group">
                                            <label for="confirmPwd">新密码</label>
                                            <input v-model="repassword" @keyup="verification" type="password"
                                                   class="form-control"
                                                   id="confirmPwd"
                                                   placeholder="confirm password">
                                            <span id="span02" :style="color" v-model="tips03">{{tips03}}</span>

                                        </div>
                                    </div>
                                    <!-- /.card-body -->
                                    <div class="card-footer">
                                        <button type="button"
                                                class="btn btn-danger  float-right" @click="submitpwd">确认修改
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="card card-danger card-outline">
                            <div class="card-header">
                                <h3 class="card-title">评论头像</h3>

                            </div>
                            <!-- /.card-header -->
                            <!-- form start -->
                            <div id="app1">
                                <form role="form" id="myform1" method="post" th:action="@{/admin/uploadavatar}"
                                      enctype="multipart/form-data">
                                    <input type="hidden" name="id">

                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="oldPwd">非管理员头像的上传</label>
                                            <input name="file" type="file"
                                                   class="form-control">

                                        </div>

                                        </span>
                                    </div>


                                    <!--                            </div>-->
                                    <!-- /.card-body -->
                                    <div class="card-footer">
                                        <button type="submit"
                                                class="btn btn-outline-primary float-right">确认修改
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer th:replace="admin/_fragment  ::foot" class="main-footer">
        <p class="text-center mb-1">
            Copyright © 2020 ZengZK Designed by ZengZK Powered by AdminLTE
        </p>
        <p class="text-center">
            <a href="">粤ICP备20040058号</a>
        </p>
    </footer>
</div>
<!-- ./wrapper -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div th:replace="admin/_fragment :: js">

    <!-- jQuery -->
    <script src="../../static/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="../../static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

    <script src="../../static/plugins/selectize/js/standalone/selectize.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../../static/js/adminlte.min.js"></script>

    <script src="../../static/js/configuration.js"></script>
</div>
<!--<script src="" th:src="@{/js/Vue.js}"></script>-->
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            newpassword: "",
            oldpassword: "",
            repassword: "",
            tips01: "",
            tips02: "",
            tips03: "",
            color: "",
            isRight: false
        },
        methods: {
            checkoldpwd() {
                axios.get('http://localhost:8080/admin/checkOldPwd?oldpwd=' + this.oldpassword).then((res) => {
                    console.log(res.data)
                    if (res.data == 'error') {
                        this.tips01 = ''
                        this.isRight = right
                        // 说明新输入的密码
                    } else {
                        this.tips01 = '密码错误'
                        this.color = 'color: red'
                        this.isRight = false


                    }
                })
            },
            checkpwd() {
                var newpwd = this.newpassword
                var oldpwd = this.oldpassword
                if (newpwd == oldpwd) {
                    this.tips02 = '新密码和旧密码不能相同'
                    this.color = 'color: red'
                    this.isRight = false
                } else {
                    this.tips02 = ''
                    this.isRight = right
                }
            },
            verification() {
                var newpwd01 = this.newpassword
                var newpwd02 = this.repassword
                if (newpwd02 != newpwd01) {
                    this.tips03 = '新密码和验证密码不相同'
                    this.color = 'color: red'
                    this.isRight = false
                } else {
                    this.tips03 = ''
                    this.isRight = true

                }
            },
            submitpwd() {
                alert(this.isRight)
                if (this.isRight) {
                    axios.get('http://localhost:8080/admin/updatepwd?newPwd=' + this.newpassword).then((res) => {
                        if (res.data == 'success') {
                            alert('修改成功')
                            location.href = '/admin/';
                        }
                    })
                }
            }
        }
    })


    // function checksubmit() {
    //     var myform = document.getElementById('myform')
    //     var span01 = document.getElementById('span01')
    //     var span02 = document.getElementById('span02');
    //     var style02 = span02.getAttribute('style')
    //     var style01 = span01.getAttribute('style')
    //     var str1 = style01.substring(style01.indexOf(':'))
    //     var str2 = style02.substring(style02.indexOf(':'))
    //     // alert(str1.indexOf(':'))
    //     // alert(str2)
    //     // alert(str1)
    //     // alert(str1.substring(str.indexOf(' ')))
    //     // alert(str2)
    //     // alert(str1)
    //     if (str2 === ': red;' || str1 === ': red;') {
    //         alert('请重新输入')
    //     } else {
    //         // alert('验证成功！')
    //         myform.submit();
    //     }
    // }
    //
    // function confirmpwd() {
    //     var newPwd = document.getElementById('newPwd').value
    //     var confirmPwd = document.getElementById('confirmPwd').value
    //     var span02 = document.getElementById('span02');
    //     if (confirmPwd != newPwd) {
    //         span02.style.color = 'red'
    //         span02.innerHTML = '密码不一致'
    //     } else {
    //         span02.style.color = 'green'
    //         span02.innerHTML = '密码一致'
    //     }
    // }

    // var newpwd = document.getElementById('newPwd').value
    // var confirmPwd = document.getElementById('confirmPwd').value
    // var vm = new Vue({
    //     el: '#app',
    //     data: {
    //         num1: '', num2: '', checkstr1: '两次输入的密码不一致',
    //         checkstr2: '码一致！'
    //     },
    //     computed: {
    //         check02: function () {
    //             // alert(this.num1)
    //             // alert(this.num2)
    //
    //             if (this.num1 != this.num2) {
    //                 this.checkstr1 = '两次输入的密码不一致'
    //             } else {
    //                 this.checkstr1 = '密码一致'
    //             }
    //             // alert(22)
    //         }
    //     }
    //
    // })

    // function checkpwd() {
    //     var span01 = document.getElementById('span01')
    //     var oldpwd = document.getElementById('oldPwd');
    //     // alert('test')
    //     $.ajax({
    //         url: '/admin/checkOldPwd',
    //         data: {'oldpwd': oldpwd.value},
    //         success: function (data) {
    //             if (data == 'success') {
    //                 span01.style.color = 'red'
    //
    //                 span01.innerHTML = '密码错误'
    //             } else {
    //                 span01.style.color = 'green'
    //
    //                 span01.innerHTML = '密码正确'
    //             }
    //         }
    //     })
    // }
</script>
</body>
</html>
